<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
            <!--<el-di0vider></el-di0vider>-->
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="roleFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="roleFormData.roleName" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="roleFormData.createBy" placeholder="请输入名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"  @click="initRoleTable">查询</el-button>
                    <el-button type="primary" @click="addFirst()">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="roleId"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="roleName"
                            label="角色名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"
                                    @change="changestatus(scope.row.roleId,scope.row.status)"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createBy"
                            label="创建人">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="updateBy"
                            label="更新人">
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="clickedit(scope.row.roleId)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="clickdelete(scope.row.roleId)"></el-button>
                            <el-button type="warning" icon="el-icon-menu" circle @click="showRoleMenu(scope.row.roleId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <!--修改角色表-->
                <el-dialog
                        title="提示"
                        :visible.sync="editDialogVisible"
                        width="30%"
                >
                    <!--model:表单数据-->
                    <el-form  label-width="80px" :model="editRoleForm" :rules="rule" ref="editRoleForm">
                        <el-form-item label="角色名" prop="roleName">
                            <el-input v-model="editRoleForm.roleName"></el-input>
                        </el-form-item>
                        <el-form-item label="角色权限字符串" prop="roleKey">
                            <el-input v-model="editRoleForm.roleKey"></el-input>
                        </el-form-item>
                        <el-form-item label="显示顺序" prop="roleSort">
                            <el-input v-model="editRoleForm.roleSort"></el-input>
                        </el-form-item>
                        <el-form-item label="数据范围" prop="dataScope">
                            <el-select v-model="editRoleForm.dataScope" placeholder="请选择数据范围">
                                <el-option label="全部数据权限" value="1"></el-option>
                                <el-option label="自定义数据权限" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="删除标志" prop="delFlag">
                            <el-select v-model="editRoleForm.delFlag" placeholder="请选择删除标志">
                                <el-option label="存在" value="0"></el-option>
                                <el-option label="删除" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="editRoleForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editRolebyRoleId('editRoleForm')">确 定</el-button>
              </span>
                </el-dialog>

                <!--新增角色表-->
                <el-dialog
                        title="提示"
                        :visible.sync="editDialogVisibleSecond"
                        width="30%"
                >
                    <!--model:表单数据-->
                    <el-form  label-width="80px" :model="addRoleForm" :rules="rule" ref="addRoleForm">
                        <el-form-item label="角色名" prop="roleName">
                            <el-input v-model="addRoleForm.roleName"></el-input>
                        </el-form-item>
                        <el-form-item label="角色权限" prop="roleKey">
                            <el-input v-model="addRoleForm.roleKey"></el-input>
                        </el-form-item>
                        <el-form-item label="显示顺序" prop="roleSort">
                            <el-input v-model="addRoleForm.roleSort"></el-input>
                        </el-form-item>
                        <el-form-item label="角色状态" prop="status">
                            <el-select v-model="addRoleForm.status" placeholder="请选择角色状态">
                                <el-option label="正常" value="0"></el-option>
                                <el-option label="禁用" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="数据范围" prop="dataScope">
                            <el-select v-model="addRoleForm.dataScope" placeholder="请选择数据范围">
                                <el-option label="全部数据权限" value="1"></el-option>
                                <el-option label="自定义数据权限" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="删除标志" prop="delFlag">
                            <el-select v-model="addRoleForm.delFlag" placeholder="请选择删除标志">
                                <el-option label="存在" value="0"></el-option>
                                <el-option label="删除" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="addRoleForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisibleSecond = false">取 消</el-button>
                <el-button type="primary" @click="addNewRole('addRoleForm')">确 定</el-button>
              </span>
                </el-dialog>

                <!--删除弹出框-->
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <span>是否确认删除</span>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click=" deleteRoleByRoleId()">确 定</el-button>
  </span>
                </el-dialog>
            </template>

            <!--分配菜单的弹出框-->
            <el-dialog
                    title="分配角色菜单"
                    :visible.sync="fenMenuDialog"
                    width="30%"
                    >
                <el-tree
                        :data="menus"
                        show-checkbox
                        node-key="menuId"
                        ref="menuTree"
                        :default-expanded-keys="roleMenuIds"

                        :props="defaultProps">
                </el-tree>

                <span slot="footer" class="dialog-footer">
            <el-button @click="fenMenuDialog = false">取 消</el-button>
            <el-button type="primary" @click="confirmFenMenu()">确 定</el-button>
          </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Role",
        data(){
            return {
                rule: {
                    roleName: [
                        {
                            required: true, message: '角色名不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '仅支持中英文、数字'
                        }
                    ],
                    roleKey:[
                        {
                            required: true, message: '不能为空', trigger: 'blur'
                        },

                    ],
                    roleSort:[
                        {
                            required: true, message: '不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[0-9]*[1-9][0-9]*$/, message: '限正整数'
                        }

                    ],
                },
                addRoleForm:{},
                editDialogVisibleSecond:false,
                editRoleForm:{},
                roleFormData:{},
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:0,
                editDialogVisible:false,
                //该角色具有的菜单id
                roleMenuIds:[],
                //所有的角色对策
                menus:[],
                //声明当前的角色id号
                roleId: 0,
                dialogVisible:false,

                fenMenuDialog:false,


                defaultProps:{
                    children: 'children',
                    label: 'menuName'
                }
            }
        },
        created() {
            this.initRoleTable();
        },
        methods:{
            addFirst(){
                this.editDialogVisibleSecond=true  ;
                this.addRoleForm={};
            },
            deleteRoleByRoleId(){
                var that = this;
                var id = this.roleId
                this.$http.delete("system/menu/deleterolebyRoleId?roleId="+id).then(r=>{
                    this.$message.success("删除成功")
                    that.dialogVisible=false;
                    this.initRoleTable();
                })

            },
            clickdelete(id){
                var that = this;
                that.roleId=id
                that.dialogVisible=true;

            },
            addNewRole(addRoleForm){
                this.$refs[addRoleForm].validate((valid) => {
                    if(valid){
                        var that = this;
                        var username = sessionStorage.getItem("username");
                        this.$http.post(`system/menu/addNewRole/${username}`,this.addRoleForm).then(r=>{
                            this.$message.success(r.data.result.message)
                            that.editDialogVisibleSecond=false;
                            this.initRoleTable();
                        })
                    }else{
                        this.$message.error("请按规范填写表中数据")
                    }

                })

            },
            editRolebyRoleId(editRoleForm){
                this.$refs[editRoleForm].validate((valid) => {
                    if(valid){
                        var that = this;
                        var username = sessionStorage.getItem("username");
                        this.$http.put(`system/menu/editRoleByRoleId/${username}`,this.editRoleForm).then(r=>{
                            this.$message.success(r.data.result.message)
                            that.editDialogVisible=false;
                            this.initRoleTable();
                        })
                    }else{
                        this.$message.error("请按规范填写表中数据")
                    }

                })
            },
            clickedit(roleId){
                var that = this;
                that.editDialogVisible=true;
                this.$http.get("system/menu/queryRoleByRoleId?id="+roleId).then(r=>{
                    console.log(r.data.result.rolebyid)
                    that.editRoleForm=r.data.result.rolebyid[0]
                })


    },
            changestatus(roleId,status){
                this.$http.put("system/menu/editRoleStatus?id="+roleId+"&status="+status).then(r=>{
                })
            },
            initRoleTable(){
                //get方式不支持json数据
                var that=this;
                this.$http.post(`system/menu/queryAllRole/${this.currentPage}/${this.pageSize}`,this.roleFormData).then(function(resp){
                    that.tableData=resp.data.result.records;
                    that.total=resp.data.result.total;
                });
            },
            showRoleMenu(roleId){
                var that=this;
                this.roleId=roleId;
                this.$http.get(`/system/menu/getMenuByRoleId/${roleId}`).then(function(r){
                    that.fenMenuDialog=true;
                    that.menus=r.data.result.menu;
                    that.roleMenuIds=r.data.result.menuByRoleId;
                    //默认选中的树的数据
                    setTimeout(() =>{
                        r.data.result.menuByRoleId.forEach(value => {
                            that.$refs.menuTree.setChecked(value, true, false);
                        })}, 100)
                });
            },
            //确认分配菜单
            confirmFenMenu(){
                var that=this;
                this.roleMenuIds=this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys());
                this.$http.get("/system/menu/confirmFenRole?userRoleIds="+this.roleMenuIds+"&userId="+this.roleId).then(function(resp){
                    that.$message.success(resp.data.message);
                    that.fenMenuDialog=false;
                })
            },
            handleSizeChange(v){
                this.pageSize=v;
                this.initRoleTable();
            },
            handleCurrentChange(v){
                this.currentPage=v;
                this.initRoleTable();
            }
        }
    }
</script>

<style scoped>

</style>
